<template>
  <div class="roles">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-input placeholder="请输入内容" v-model="inputVal">
      <!-- 通过插槽  附加到输入框后面  element中input中的slot属性-->
      <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>
    <!-- 按钮 -->
    <el-button type="primary" plain @click="addDialogFormVisible = true">添加角色</el-button>
    <!-- 表格 -->
    <el-table class='mt-15' :data="rolesList" border style="width: 100%">
      <!-- 这是展开行的内容 -->
      <el-table-column type="expand">
        <template slot-scope="scope">
          <!-- 当行数不等于0时显示 -->
          <el-row v-for='firstItem in scope.row.children' :key='firstItem.id' v-show='scope.row.children.length!==0'>
            <el-col :span="4">
              <!-- 第一个参数表示当前点击的权限id，第二个表示点击的当前行的数据 -->
              <el-tag closable @close='handleDelRights(firstItem.id,scope.row.id)'>{{firstItem.authName}}</el-tag>
              <!-- 添加右箭头  当右边没有数据的时候不需要显示右箭头-->
              <i class="el-icon-arrow-right" v-if='scope.row.children.length>0'></i>
            </el-col>

            <el-col :span="20">
              <el-row v-for='secondItem in firstItem.children' :key='secondItem.id'>
                <el-col :span="4">
                  <el-tag type="success" closable @close='handleDelRights(secondItem.id,scope.row.id)'>{{secondItem.authName}}</el-tag>
                  <i class="el-icon-arrow-right" v-if='scope.row.children.length>0'></i>
                </el-col>
                <el-col :span="20">
                  <el-tag type="warning" closable v-for='thirdItem in secondItem.children' :key='thirdItem.id' @close='handleDelRights(thirdItem.id,scope.row.id)'>{{thirdItem.authName}}</el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!-- 当行数等于0时显示如下内容 -->
          <el-row>
            <span v-show='scope.row.children.length===0'>该角色没有权限</span>
          </el-row>
        </template>
      </el-table-column>
      <!-- 这是表格前面的数字编号 -->
      <el-table-column type="index">
      </el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="180">
      </el-table-column>
      <el-table-column prop="roleDesc" label="描述" width="180">
      </el-table-column>
      <el-table-column prop="" label="操作">
        <!-- 通过scope.row可以取到表格那一行对象里面的属性 -->
        <!-- slot-scope="scope" -->
        <template slot-scope="scope">
          <el-button type="success" icon="el-icon-check" plain @click='handleAuth(scope.row)'></el-button>
          <el-button type="danger" icon="el-icon-delete" plain @click='handleDelRoles(scope.row.id)'></el-button>
          <el-button type="primary" icon="el-icon-edit" plain @click='handleEditRoles(scope.row)'></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
    </el-pagination>
    <!-- 这是点击添加角色弹出的对话框 -->
    <el-dialog title="添加角色" :visible.sync="addDialogFormVisible">
      <el-form :model="addRoleForm" :rules="myrules" ref='addRoleForm'>
        <el-form-item label="角色名称" :label-width="formLabelWidth" prop='roleName'>
          <el-input v-model="addRoleForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" :label-width="formLabelWidth" prop="roleDesc">
          <el-input v-model="addRoleForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddRoles('addRoleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 这是点击编辑角色弹出的对话框 -->
    <el-dialog title="编辑角色" :visible.sync="editDialogFormVisible">
      <el-form :model="editRoleForm" :rules="myrules" ref='editRoleForm'>
        <el-form-item label="角色名称" :label-width="formLabelWidth" prop='roleName'>
          <el-input v-model="editRoleForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" :label-width="formLabelWidth" prop="roleDesc">
          <el-input v-model="editRoleForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit('editRoleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 树型节点 -->
    <el-dialog title="授权角色" :visible.sync="authDialogFormVisible">
      <!-- node key  唯一标识每个节点 -->
      <!-- default-expanded-keys 用于设置默认展开的节点   default-expand-all展开所有-->
      <!-- default-checked-keys 用于设置默认选中的节点，注意父节点默认选中 -->
      <div class="treebox">
        <el-tree :data="rightList" show-checkbox default-expand-all node-key="id" ref="tree" :default-checked-keys="selectedIds" :props="defaultProps">
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="authDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click='submitGrant'>确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {
  getRolesList,
  getAddRoles,
  getDelRoles,
  getEditRoles,
  getRights,
  grantUserRight,
  delRights
} from '@/api'
export default {
  data () {
    return {
      inputVal: '',
      rolesList: [],
      addRoleForm: {
        roleName: '',
        roleDesc: ''
      },
      // 添加角色字段
      addDialogFormVisible: false,
      formLabelWidth: '80px',
      myrules: {
        roleName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        roleDesc: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      // 编辑角色字段
      editDialogFormVisible: false,
      editRoleForm: {
        id: '',
        roleName: '',
        roleDesc: '' // 这里的字段只能是和数据打印的字段一致，可以不定义
      },
      // 树状图的字段
      authDialogFormVisible: false,
      rightList: [],
      defaultProps: {
        // 表示哪个作为子节点
        children: 'children',
        // 看文档看出label是显示在树上的值
        label: 'authName'
      },
      selectedIds: [], // 用来获取迷人选中的节点id的数组
      currentRole: {} // 用来保存当前被点击的那一行的数据，对象
    }
  },
  created () {
    this.initRoles()
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    // 初始化数据
    initRoles () {
      getRolesList().then(res => {
        // console.log(res)
        this.rolesList = res.data
      })
    },
    // 添加角色
    handleAddRoles () {
      getAddRoles(this.addRoleForm).then(res => {
        // console.log(res)
        if (res.meta.status === 201) {
          // 隐藏对话框
          this.addDialogFormVisible = false
          // 刷新页面
          this.initRoles()
          // 清空input框的内容
          this.addRoleForm.roleName = ''
          this.addRoleForm.roleDesc = ''
          this.$message.success('添加角色成功')
        }
      })
    },
    // 删除角色
    handleDelRoles (id) {
      getDelRoles(id).then(res => {
        // console.log(res)
        if (res.meta.status === 200) {
          this.initRoles()
        }
      })
    },
    // 查询角色  需要像user页面那样传入查询参数

    // 编辑角色弹框
    handleEditRoles (row) {
      console.log(row)
      this.editDialogFormVisible = true
      // 获取到点击的那行的id
      this.editRoleForm.id = row.id
      console.log(typeof this.editRoleForm.id)
      this.editRoleForm.roleName = row.roleName
      this.editRoleForm.roleDesc = row.roleDesc
    },
    // 提交更改角色
    submitEdit (formRef) {
      this.$refs[formRef].validate(isPass => {
        if (isPass) {
          // 这里的参数的个数必须和接口的一致
          getEditRoles(this.editRoleForm.id, this.editRoleForm).then(res => {
            console.log(res)
            if (res.meta.status === 200) {
              this.$message.success('编辑成功')
              this.editDialogFormVisible = false
              this.roleName = ''
              this.roleDesc = ''
              this.initRoles()
            }
          })
        } else {
          this.$message.warning('请正确填写表单')
        }
      })
    },
    // 授权角色
    // 2.6 需要将点击的那一行数据传入函数中
    handleAuth (row) {
      console.log(row)
      // 显示授权角色弹框
      this.authDialogFormVisible = true
      // 2.12 在点击授权角色的时候，应该将当前那一行数据存起来，因为在点击确定提交的时候，需要用到这一行的角色id
      this.currentRole = row
      // 2.4获取树形控件数据
      getRights('tree').then(res => {
        // console.log(res)
        this.rightList = res.data

        // 2.7 在每次循环获取selectedId数组时，应该先给数组清空
        this.selectedIds.length = 0
        // 2.5 为了得到获取默认选中节点id的数组，我们只需要将点击的那个角色（也就是那一行数据）的第三层权限的id取出来放进数组中，因为第三层选中默认第一层和第二层也会选中
        // 先循环最外层的children
        row.children.map(firstItem => {
          // 循环第二层的时候先判断第二层的children是否存在并且是否有值
          if (firstItem.children && firstItem.children.length > 0) {
            firstItem.children.map(secondItem => {
              // 循环第3层的时候先判断第三层的children是否存在并且有值
              if (secondItem.children && secondItem.children.length > 0) {
                secondItem.children.map(thirdItem => {
                  this.selectedIds.push(thirdItem.id)
                })
              }
            })
          }
        })
      })
    },
    // 提交角色授权
    submitGrant () {
      // console.log('sss')
      //  2.8 先获取用户修改之后，选中的节点的id，获取选中节点用getCheckedNodes(),因为它能够获取到父节点id
      // let nodeObj = this.$refs.tree.getCheckedNodes()
      // // 2.9 获取所有id和pid组成的数组
      // let tempArr = nodeObj.map(item => item.id + ',' + item.pid) // ["105,104,101", "116,104,101"]
      // let repeatedIdArr = tempArr.join(',').split(',') // ["105", "104", "101", "116", "104", "101"]
      // // 2.10 将上面得到的数组去重
      // // Set类型的数据有个特点，它的值是唯一不重复的
      // let myset = new Set(repeatedIdArr)
      // let idArr = [...myset] // ["105", "104", "101", "116"]
      // // 2.11 得到需要传递的字符串
      // let idStrs = idArr.join(',') // "105,104,101,116"
      let childkeys = this.$refs.tree.getCheckedKeys()
      console.log(childkeys)
      let fatherkeys = this.$refs.tree.getHalfCheckedKeys()
      console.log(fatherkeys)
      // 将两个数组拼接成一个数组
      let idArr = [...childkeys, ...fatherkeys]
      console.log(idArr)
      // console.log(idArr)
      // 需要转换成字符串进行传递
      let idStrs = idArr.join(',')
      console.log(idStrs)

      grantUserRight(this.currentRole.id, idStrs).then(res => {
        console.log(res)
        if (res.meta.status === 200) {
          // 提示成功信息
          this.$message.success(res.meta.msg)
          // 刷新表格
          this.initRoles()

          // 隐藏对话框
          this.authDialogFormVisible = false
        }
      })
    },
    // 删除权限
    // 这里的参数是形参，可以随便写
    handleDelRights (id1, id2) {
      // 调用发请求的接口，传递权限id，以及角色id（即那一行数据的id）
      delRights(id1, id2).then(res => {
        console.log(res)
        this.initRoles()
        this.$message.success('删除权限成功')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .roles {
    .el-tag {
      margin: 5px;
    }
  }
  .treebox {
    height: 300px;
    overflow: hidden;
  }
</style>
